<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的宠物健康记录 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/user-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">我的宠物健康记录</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a href="${pageContext.request.contextPath}/health/followUp" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-bell"></i> 复诊提醒
                        </a>
                    </div>
                </div>

                <!-- 消息提示 -->
                <c:if test="${not empty param.success}">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        ${param.success}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </c:if>
                <c:if test="${not empty param.error}">
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        ${param.error}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </c:if>

                <!-- 搜索表单 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">搜索条件</h5>
                    </div>
                    <div class="card-body">
                        <form method="get" action="${pageContext.request.contextPath}/health/search">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="petName" class="form-label">宠物姓名</label>
                                    <input type="text" class="form-control" id="petName" name="petName" 
                                           value="${petName}" placeholder="输入宠物姓名">
                                </div>
                                <div class="col-md-4">
                                    <label for="diagnosis" class="form-label">诊断结果</label>
                                    <input type="text" class="form-control" id="diagnosis" name="diagnosis" 
                                           value="${diagnosis}" placeholder="输入诊断关键词">
                                </div>
                                <div class="col-md-4">
                                    <label for="visitDateStart" class="form-label">就诊开始日期</label>
                                    <input type="date" class="form-control" id="visitDateStart" name="visitDateStart" 
                                           value="${visitDateStart}">
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <label for="visitDateEnd" class="form-label">就诊结束日期</label>
                                    <input type="date" class="form-control" id="visitDateEnd" name="visitDateEnd" 
                                           value="${visitDateEnd}">
                                </div>
                                <div class="col-md-8 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary me-2">
                                        <i class="fas fa-search"></i> 搜索
                                    </button>
                                    <a href="${pageContext.request.contextPath}/health/my-records" class="btn btn-secondary">
                                        <i class="fas fa-undo"></i> 重置
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 健康记录列表 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">健康记录列表</h5>
                    </div>
                    <div class="card-body">
                        <c:choose>
                            <c:when test="${not empty pageResult.data}">
                                <div class="row">
                                    <c:forEach var="record" items="${pageResult.data}">
                                        <div class="col-md-6 col-lg-4 mb-4">
                                            <div class="card h-100">
                                                <div class="card-header d-flex justify-content-between align-items-center">
                                                    <h6 class="card-title mb-0">
                                                        <i class="fas fa-paw text-primary"></i> ${record.pet.petName}
                                                    </h6>
                                                    <small class="text-muted">
                                                        <fmt:formatDate value="${record.visitDate}" pattern="yyyy-MM-dd"/>
                                                    </small>
                                                </div>
                                                <div class="card-body">
                                                    <div class="mb-2">
                                                        <strong>宠物信息：</strong>
                                                        <span class="text-muted">${record.pet.petType} - ${record.pet.breed}</span>
                                                    </div>
                                                    
                                                    <div class="mb-2">
                                                        <strong>症状：</strong>
                                                        <p class="text-muted mb-1">
                                                            <c:choose>
                                                                <c:when test="${fn:length(record.symptoms) > 50}">
                                                                    ${fn:substring(record.symptoms, 0, 50)}...
                                                                </c:when>
                                                                <c:otherwise>
                                                                    ${record.symptoms}
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </p>
                                                    </div>
                                                    
                                                    <div class="mb-2">
                                                        <strong>诊断：</strong>
                                                        <p class="text-muted mb-1">
                                                            <c:choose>
                                                                <c:when test="${fn:length(record.diagnosis) > 50}">
                                                                    ${fn:substring(record.diagnosis, 0, 50)}...
                                                                </c:when>
                                                                <c:otherwise>
                                                                    ${record.diagnosis}
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </p>
                                                    </div>
                                                    
                                                    <c:if test="${not empty record.doctorName}">
                                                        <div class="mb-2">
                                                            <strong>医生：</strong>
                                                            <span class="text-muted">${record.doctorName}</span>
                                                        </div>
                                                    </c:if>
                                                    
                                                    <c:if test="${not empty record.cost}">
                                                        <div class="mb-2">
                                                            <strong>费用：</strong>
                                                            <span class="text-success">¥<fmt:formatNumber value="${record.cost}" pattern="#,##0.00"/></span>
                                                        </div>
                                                    </c:if>
                                                    
                                                    <c:if test="${not empty record.nextVisitDate}">
                                                        <div class="mb-2">
                                                            <strong>复诊日期：</strong>
                                                            <span class="text-warning">
                                                                <fmt:formatDate value="${record.nextVisitDate}" pattern="yyyy-MM-dd"/>
                                                            </span>
                                                            <c:if test="${record.needsFollowUp()}">
                                                                <span class="badge bg-warning ms-1">需复诊</span>
                                                            </c:if>
                                                        </div>
                                                    </c:if>
                                                </div>
                                                <div class="card-footer">
                                                    <a href="${pageContext.request.contextPath}/health/view?id=${record.recordId}" 
                                                       class="btn btn-primary btn-sm">
                                                        <i class="fas fa-eye"></i> 查看详情
                                                    </a>
                                                    <small class="text-muted float-end">
                                                        记录ID: ${record.recordId}
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>

                                <!-- 分页 -->
                                <c:if test="${pageResult.totalPages > 1}">
                                    <nav aria-label="健康记录分页">
                                        <ul class="pagination justify-content-center">
                                            <c:if test="${pageResult.currentPage > 1}">
                                                <li class="page-item">
                                                    <a class="page-link" href="?page=${pageResult.currentPage - 1}&size=${pageSize}">上一页</a>
                                                </li>
                                            </c:if>
                                            
                                            <c:forEach begin="1" end="${pageResult.totalPages}" var="i">
                                                <c:choose>
                                                    <c:when test="${i == pageResult.currentPage}">
                                                        <li class="page-item active">
                                                            <span class="page-link">${i}</span>
                                                        </li>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <li class="page-item">
                                                            <a class="page-link" href="?page=${i}&size=${pageSize}">${i}</a>
                                                        </li>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:forEach>
                                            
                                            <c:if test="${pageResult.currentPage < pageResult.totalPages}">
                                                <li class="page-item">
                                                    <a class="page-link" href="?page=${pageResult.currentPage + 1}&size=${pageSize}">下一页</a>
                                                </li>
                                            </c:if>
                                        </ul>
                                    </nav>
                                </c:if>

                                <!-- 分页信息 -->
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <div>
                                        共 ${pageResult.totalCount} 条记录
                                    </div>
                                    <div>
                                        <select class="form-select form-select-sm" onchange="changePageSize(this.value)" style="width: auto;">
                                            <option value="9" ${pageSize == 9 ? 'selected' : ''}>每页9条</option>
                                            <option value="18" ${pageSize == 18 ? 'selected' : ''}>每页18条</option>
                                            <option value="36" ${pageSize == 36 ? 'selected' : ''}>每页36条</option>
                                        </select>
                                    </div>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="text-center py-5">
                                    <i class="fas fa-heartbeat fa-4x text-muted mb-3"></i>
                                    <h4 class="text-muted">暂无健康记录</h4>
                                    <p class="text-muted">您的宠物还没有健康记录，请联系医院为您的宠物建立健康档案。</p>
                                    <a href="${pageContext.request.contextPath}/appointment/add" class="btn btn-primary">
                                        <i class="fas fa-calendar-plus"></i> 预约就诊
                                    </a>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 改变每页显示数量
        function changePageSize(size) {
            const url = new URL(window.location);
            url.searchParams.set('size', size);
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        }
    </script>
</body>
</html>
